<style lang="less">
 @import './icon.less';
</style>

<template>
  <i
    class="icon"
    :class="{
      [`icon-${type}`]: type,
      [`icon-theme__${theme}`]: theme,
      'icon-image-mode': image,
      'icon-active': active,
    }"
    :style="styles"
    @click="handleClick"
  />
</template>

<script>
const re = /^\d+\.?\d+$/

export default {
  props: {
    type: { // 参考 icon.less
      type: String,
      default: '',
    },
    size: {
      type: Number,
      default: null,
    },
    image: {
      type: Boolean,
      default: false,
    },
    active: {
      type: Boolean,
      default: false,
    },
    theme: { // 参考 icon.less
      type: String,
      default: '',
    },
  },

  computed: {
    showSize () {
      if (re.test(this.size)) {
        return `${this.size}px`
      }

      return null
    },

    styles () {
      const size = this.showSize
      let styles = ''

      if (this.image) {
        if (size) {
          styles += `width: ${size}; height: ${size};`
        }

        let name = this.type

        if (this.active) {
          name += '_active'
        }

        const image = require(`~/assets/images/icons/${name}.png`)

        styles += `background-image: url(${image});`
      } else if (size) {
        styles += `font-size: ${size};`
      }

      return styles
    },
  },

  methods: {
    handleClick (ev) {
      this.$emit('click', ev)
    },
  },
}
</script>
